<!-- components/customTabBar.vue -->
<template>
  <view class="custom-tab-bars">
    <view
      class="tab-itemx"
      :class="{ 'selected': currentTab === '/pages/bookshelf/index' }"
      @tap="navigateToPage('/pages/bookshelf/index')"
    >
      <image src="/static/images/bookshelf_s.png" class="tab-icon" v-if="currentTab === '/pages/bookshelf/index'"></image>
	  <image src="/static/images/bookshelf.png" class="tab-icon" v-else></image>
      <text class="tab-text">书架</text>
    </view>
    <view
      class="tab-itemx"
      :class="{ 'selected': currentTab === '/pages/book_mall/index' }"
      @tap="navigateToPage('/pages/book_mall/index')"
    >
	  <image src="/static/images/so_s.png" class="tab-icon" v-if="currentTab === '/pages/book_mall/index'"></image>
      <image src="/static/images/so.png" class="tab-icon" v-else></image>
      <text class="tab-text">搜索</text>
    </view>
	<view
	  class="tab-itemx"
	  :class="{ 'selected': currentTab === '/pages/index/index' }"
	  @tap="navigateToPage('/pages/index/index')"
	> <image src="/static/images/book_mall_s.png" class="tab-icon" v-if="currentTab === '/pages/index/index'"></image>
	  <image src="/static/images/book_mall.png" class="tab-icon" v-else></image>
	  <text class="tab-text">发现</text>
	</view>
	<view
	  class="tab-itemx"
	  :class="{ 'selected': currentTab === '/pages/user/my' }"
	  @tap="navigateToPage('/pages/user/my')"
	>
	 <image src="/static/images/user_s.png" class="tab-icon" v-if="currentTab === '/pages/user/my'"></image>
	  <image src="/static/images/user.png" class="tab-icon" v-else></image>
	  <text class="tab-text">我的</text>
	</view>
    <!-- 其他 tab 项... -->
  </view>
</template>

<script>
import time from '@/util/getdateTime.js';
export default {
	props: {
		currentTab: {
			type: String,
			required: true,
			default:'',
			
		}
	},
	data() {
		return {
			tt: '0分',
		}
	},
	created() {
		console.log('tab导航栏启动了')
		let _this=this;
		let tt = time.getInervalHour(time.dtime(), uni.getStorageSync('config_time'))
		this.tt=tt
		console.log('this.onShow',tt)
		uni.$on('ad_time',function(data){
			let tt = time.getInervalHour(time.dtime(), uni.getStorageSync('config_time'))
			_this.tt=tt	
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data);
		})
	},
	beforeUpdate(){
		console.log('tab导航栏启动了')
		let tt = time.getInervalHour(time.dtime(), uni.getStorageSync('config_time'))
		this.tt=tt
		console.log('this.beforeUpdate',tt)
	},
	methods: {
    navigateToPage(url) {
      uni.switchTab({
        url: url,
      });
    
    }
  },
};
</script>

<style scoped>
.custom-tab-bars {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 130rpx;
  background-color: #fff; /* 根据需求设置背景颜色 */
  padding-bottom: 10rpx;
}

.tab-itemx {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #333; /* 根据需求设置文本颜色 */
}

.tab-icon {
  width: 40rpx; /* 根据需求设置图片宽度 */
  height: 40rpx; /* 根据需求设置图片高度 */
  margin-bottom: 4rpx; /* 调整图片与文字的间距 */
}

.tab-text {
  margin-top: 4rpx; /* 调整文字与图片的间距 */
}

.selected {
  color: #FF5722; /* 根据需求设置选中时的文本颜色 */
}
</style>
